<template>
	<view style="padding-bottom: 120upx;">
		<Header :showBack="false" title="购物车"></Header>
		<view class="box">
				<scroll-view @touchend="setTimer" scroll-x="true" :scroll-left="item.scrollLeft"  @scroll="changeLeft($event,index)" v-for="(item,index) in list" :key="index">
					<view class="item">
						<view class="check" @click.stop="check(index)" :class="{'active':item.isCheck}">
							
						</view>
						<image :src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + item.imgUrl" mode="aspectFill"></image>
						<view>
							<view>{{item.productName}}</view>
							<view>
								
								<view>￥{{item.price}}</view>
								<view>
									<view @click.stop="changeNum(index,1)"><image src="../static/img/jian.png" mode=""></image></view>
									<input type="text" v-model="item.quantity" :disabled="true" />
									<view @click.stop="changeNum(index,2)"><image src="../static/img/jia.png" mode=""></image></view>
								</view>
							</view>
						</view>
						
						<view @click.stop="delShopCar(item.id,index)">
							删除
						</view>
						
					</view>
				</scroll-view>
		</view>
		<view class="pay">
			<view>
				<view @click="changeAll" class="check" :class="{'active':checkAll}">
					
				</view>
				全选
			</view>
			<view>
				<view>合计 <text style="color: #ff4040;font-size: 32upx;font-weight: 500;"> <text style="font-size: 20upx;">￥</text> {{price}} </text> </view>
				
				<view>共{{num}}件商品</view>
				
			</view>
			<view @click="toPay">
				去结算
			</view>
		</view>
	</view>
</template>

<script>
	let timer = null 
	export default {
		data() {
			return {
				baseUrl:getApp().globalData.baseUrl,
				curScrollLeft:0,
				deleteWidth:uni.upx2px(150),
				curIndex:0,
				list:[],
				checkAll:true,
				price:0,
				num:0
			}
		},
		mounted() {
			// this.getList()
		},
		methods: {
			toPay(){
				if(this.num>0&&this.price>0){
					let items = this.list.filter((item,index)=>{
						if(item.isCheck) return item;
					})
					uni.navigateTo({
						url:`/pages/shopMall/buy?num=${this.num}&price=${this.price}&items=${JSON.stringify(items)}`
					})
					
					
				}else{
					uni.showToast({
						icon:'none',
						title:'您没有选择商品'
					})
				}
			},
			delShopCar(id,index){
				this.$http('/common/api/shopingCart/delete',[id],res=>{
					this.list.splice(index,1)
				})
			},
			changeAll(){
				this.checkAll = !this.checkAll
				let length = this.list.length
				for(let i=0;i<length;i++){
					this.list[i].isCheck = this.checkAll
				}
				this.getPayData()
			},
			getPayData(){
				let price = 0,num = 0
				this.list.forEach((item,index)=>{
					if(item.isCheck){
						num += item.quantity
						price += item.quantity*item.price
					}
				})
				
				this.price = price.toFixed(2)
				this.num = num
			},
			getList(){
				this.num = 0
				this.price = 0
				this.checkAll = true
				this.$http('/common/api/shopingCart/getOwnerList',{},res=>{
					this.list = res.data.items.map((item,index)=>{
						return {
							isCheck:true,
							scrollLeft:0,
							...item
						}
					})
					this.getPayData()
				})
			},
			clear(){
				// clearInterval(timer)
				// if(this.curScrollLeft>=this.deleteWidth/2){
				// 	 this.list[this.curIndex].scrollLeft = this.curScrollLeft
				// 	 clearInterval(timer)
				// }else{
				// 	this.list[this.curIndex].scrollLeft = this.curScrollLeft
				// 	clearInterval(timer) 
				// }
			},
			setTimer(){
				this.list[this.curIndex].scrollLeft = this.curScrollLeft
				this.$nextTick(()=>{
					if(this.curScrollLeft>=this.deleteWidth/2){
						this.list[this.curIndex].scrollLeft = 100
						//  timer = setInterval(()=>{
						// 	if(this.curScrollLeft<90){
						// 		this.curScrollLeft+=10
						// 		this.list[this.curIndex].scrollLeft = this.curScrollLeft
						// 	}else{
						// 		this.curScrollLeft = 100
						// 		this.list[this.curIndex].scrollLeft = this.curScrollLeft
						// 		clearInterval(timer)
						// 	}
						// },50)
					}else{
						this.list[this.curIndex].scrollLeft = 0
						//  timer = setInterval(()=>{
						// 	if(this.curScrollLeft>10){
						// 		this.curScrollLeft-=10
						// 		this.list[this.curIndex].scrollLeft = this.curScrollLeft
						// 	}else{
						// 		this.curScrollLeft = 0
						// 		this.list[this.curIndex].scrollLeft = this.curScrollLeft
						// 		clearInterval(timer)
						// 	}
						// },50)
					}
				})
				
				
			},
			changeLeft(e,index){
				this.curScrollLeft = e.detail.scrollLeft
				this.curIndex = index
			},
			changeNum(index,type){
				if(type==1){
					if(this.list[index].quantity>=1)this.list[index].quantity--;
				}else if(type==2){
					this.list[index].quantity++
				}
				if(timer){
				    clearTimeout(timer) 
				}
				timer = setTimeout(()=>{
					this.$http('/common/api/shopingCart/saveQuantity',{
						"id":this.list[index].id,
						"quantity":this.list[index].quantity
					},res=>{
						if(this.list[index].quantity==0){
							this.list.splice(index,1)
						}
						this.getPayData()
					})
				},500)
			},
			check(index){
				this.list[index].isCheck = !this.list[index].isCheck
				this.getPayData()
			}
		}
	}
</script>

<style scoped lang="less">
.box{
	padding-top: 20upx;
	width: 100%;
	scroll-view{
		width: 100%;
		view.item{
			width: 900upx;
			display: flex;
			height: 200upx;
			align-items: center;
			background-color: #FFFFFF;
			
			>image{
				width: 100upx;
				height: 100upx;
				margin-right: 30upx;
			}
			>view:nth-child(3){
				width: 526upx;
				height: 100%;
				box-sizing: border-box;
				padding-top: 40upx;
				>view:first-child{
					font-size: 30upx;
					height: 80upx;
					line-height: 40upx;
					color: #777777;
				}
				>view:last-child{
					display: flex;
					height: 50upx;
					justify-content: space-between;
					>view:first-child{
						height: 100%;
						line-height: 50upx;
						color: #ff4040;
						font-size: 26upx;
						font-weight: 500;
					}
					>view:last-child{
						display: flex;
						height: 100%;
						align-items: center;
						margin-right: 30upx;
						>view{
							text-align: center;
							width: 40upx;
							height: 40upx;
							>image{
								width: 30upx;
								height: 30upx;
							}
						}
						>input{
							width: 70upx;
							height: 40upx;
							line-height: 40upx;
							text-align: center;
							background-color: #eeeef0;
							margin: 0 20upx;
							font-size: 28upx;
						}
					}
				}
			}
			>view:last-child{
				height: 100%;
				width: 150upx;
				line-height: 200upx;
				color: #FFFFFF;
				font-size: 32upx;
				text-align: center;
				background-color: #ff4040;
			}
		}
	}
}
.pay{
	width: 100%;
	position: fixed;
	bottom: 120upx;
	display: flex;
	background-color: #FFFFFF;
	height: 120upx;
	z-index: 99;
	align-items: center;
	>view:first-child{
		display: flex;
		font-size: 26upx;
		align-items: center;
		width: 200upx;
	}
	>view:nth-child(2){
		width: 310upx;
		text-align: right;
		color: #888888;
		>view:first-child{
			font-size: 26upx;
			height: 40upx;
			line-height: 40upx;
		}
		>view:last-child{
			font-size: 22upx;
			height: 40upx;
			line-height: 40upx;
		}
	}
	>view:last-child{
		width: 200upx;
		height: 80upx;
		background-color: #ff4040;
		color: #FFFFFF;
		line-height: 80upx;
		border-radius: 40upx;
		text-align: center;
		font-size: 32upx;
		margin-left: 20upx;
	}
}
view.check{
				box-sizing: border-box;
				border: 1px solid #999999;
				border-radius: 50%;
				width: 35upx;
				height: 35upx;
				background-size: 100% 100%;
				margin: 0 30upx;
				
			}
view.check.active{
				border: none;
				background-image: url(../static/img/checked.png);
			}
</style>
